<template>
  <div style="width: 100%; height: 100%; background-color: #000">
    <div class="boxTop">
      <div class="boxTop_title">航标运行管理</div>
      <div class="boxTop_right">
        <div class="boxTop_right_btn ht" @click="$router.push('/index')"></div>
      </div>
    </div>
    <div class="boxCenter">
      <div class="boxCenter_item" style="
          width: 25%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        ">
        <lefttop class="Xbox" style="height:40%;" ref="ssSj"></lefttop>
        <leftcenter class="Xbox" style="height: 25%;" ref="hjaq"></leftcenter>
        <leftbottom class="Xbox" style="height: 32%;"></leftbottom>
      </div>
      <div class="boxCenter_item" style="width: 49%">
        <mapDiv ref="mapv"></mapDiv>
      </div>
      <div class="boxCenter_item" style="
          width: 25%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        ">
        <lxsjgl class="Xbox" style="height: 100%;"></lxsjgl>
        <!-- <rightTop class="Xbox"></rightTop>
        <rightCenter class="Xbox" ref="hbdhj"></rightCenter>
        <rightBottom class="Xbox" ref="gjxx"></rightBottom> -->
      </div>
    </div>
  </div>
</template>
<script>
import mapDiv from "@/components/map/index.vue";
import lefttop from "./components/lefttop.vue";
import leftcenter from "./components/leftcenter.vue";
import leftbottom from "./components/leftbottom.vue";
import rightTop from "./components/rightTop.vue";
import rightCenter from "./components/rightCenter.vue";
import rightBottom from "./components/rightBottom.vue";
import lxsjgl from "./components/lxsjgl.vue";
import { mainlist, buoylist } from "@/api/hbyxgl.js";
export default {
  components: {
    mapDiv,
    lefttop,
    leftcenter,
    leftbottom,
    rightTop,
    rightCenter,
    rightBottom,
    lxsjgl,
  },
  //变量
  data() {
    return {};
  },
  //初始
  mounted() {
    this.getmainlist();
    this.getbuoylist();
  },
  //事件
  methods: {
    getmainlist() {
      mainlist().then((res) => {
        this.$refs.ssSj.init(res.sssj);
        this.$refs.hjaq.init(res.hjaq);
        // this.$refs.hbdhj.init(res.hbdhj);
        // this.$refs.gjxx.init(res.gjxx);
      });
    },
    getbuoylist() {
      buoylist({ pageNum: 1, pageSize: 1000 }).then((res) => {
        console.log(res.rows);
        this.$refs.mapv.initData(res.rows);
      });
    },
  },
  //销毁
  beforeDestroy() { },
};
</script>
<style scoped>
.boxTop {
  width: 100%;
  height: 80px;
  /* background-color: bisque; */
  position: relative;
  background: url("~@/assets/hb_img/bj/topBj.png") no-repeat;
  background-size: 100% 100%;
}

.boxTop_title {
  font-family: SourceHanSansCN-Heavy;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: bold;
  color: #fff;

}

.boxTop_right {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.boxTop_right_btn {
  margin-left: 10px;
  cursor: pointer;
}

.boxCenter {
  width: 100%;
  height: calc(100% - 90px);
  /* background-color: #6666; */
  display: flex;
  justify-content: space-between;
  padding: 0px 20px;
}

.ht {
  width: 120px;
  height: 30px;
  background: url("~@/assets/hb_img/bj/jrht.png") no-repeat;
  background-size: 100% 100%;
}

.boxCenter_item {
  /* width: calc(100% / 3 - 10px); */
  height: 100%;
  /* background: red; */
}

.Xbox {
  background: rgba(0, 13, 57, 0.75);
  width: 100%;
  height: calc(100% / 3 - 5px);
}

::v-deep .XboxTop {
  width: 100%;
  height: 36px;
  /* background-color: rgba(0, 78, 163, 0.8);
   */
  background: url("~@/assets/hb_img/bj/img_xbt@2x.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  display: flex;
  /* align-items: center; */
}

::v-deep .XboxTop_title {
  margin-left: 40px;
  font-weight: bold;
  background: linear-gradient(180deg, #FFF 28.94%, #70B4FF 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

::v-deep .XboxTop_con {
  width: 100%;
  height: calc(100% - 36px);
  position: relative;
}
</style>
